<template>
  <div>
    <el-card>
      <breadcrumb title="健康打卡管理详情" homePath="/teacher/health" />

      <el-table
        :data="studentData"
        stripe
        style="width: 100%"
        border
        v-if="index != 2"
      >
        <template slot="empty">
          <p>{{ emptyText }}</p>
        </template>
        <el-table-column prop="id" label="学号" width="100" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="address" label="生源地" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="classes" label="班级" />
      </el-table>

      <el-table :data="studentData" stripe style="width: 100%" border v-else>
        <template slot="empty">
          <p>{{ emptyText }}</p>
        </template>
        <el-table-column type="index" label="序列号" width="100" />
        <el-table-column prop="u_id" label="学号" />
        <el-table-column label="是否发烧">
          <template slot-scope="scope">
            <p :style="{ color: scope.row.fever == '是' ? 'red' : '' }">
              {{ scope.row.fever }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="体温(℃)">
          <template slot-scope="scope">
            <p :style="{ color: scope.row.temperature > 37.2 ? 'red' : '' }">
              {{ scope.row.temperature }}
            </p>
          </template>
        </el-table-column>

        <el-table-column prop="hesuan" label="是否接种疫苗" />
        <el-table-column prop="mask" label="口罩是否充足" />
        <el-table-column prop="kills" label="杀毒用品是否充足" />
      </el-table>

      <!-- 底部分页栏 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="allStudentNum"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from "components/Breadcrumb";

import { getUsersByTypePage } from "network/users/getUsersByTypePage";
import { gethealthNowDayPage } from "network/teacher/gethealthNowDayPage";
import { getRiskedPeoplePage } from "network/teacher/getRiskedPeoplePage";
import { getDangerPeoplePage } from "network/teacher/getDangerPeoplePage";

export default {
  name: "Detail",
  components: {
    Breadcrumb,
  },
  data() {
    return {
      studentData: [],
      emptyText: "",
      queryInfo: {
        currPage: 1,
        pageSize: 5,
      },
      index: 0,
      allStudentNum: 0,
    };
  },
  created() {
    // console.log(this.$route.params);
    this.$store.commit("setCurrentIndex", {
      type: "teacherCurrentIndex",
      index: 0,
    });

    this.index = this.$route.params.mod;
    if (this.index == 1) {
      this.getUsersByTypePage();
    }
    if (this.index == 2) {
      this.gethealthNowDayPage();
    }
    if (this.index == 3) {
      this.getRiskedPeoplePage();
    }
    if (this.index == 4) {
      this.getDangerPeoplePage();
    }
  },
  methods: {
    // 获取所有的学生
    async getUsersByTypePage() {
      let res = await getUsersByTypePage(
        2,
        this.queryInfo.pageSize,
        this.queryInfo.currPage
      );
      this.studentData = res.data;
      this.allStudentNum = res.total;
    },
    // 处理改变一页的数量
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      if (this.index == 1) {
        this.getUsersByTypePage();
      }
      if (this.index == 2) {
        this.gethealthNowDayPage();
      }
      if (this.index == 3) {
        this.getRiskedPeoplePage();
      }
      if (this.index == 4) {
        this.getDangerPeoplePage();
      }
    },
    // 处理改变页码
    handleCurrentChange(newPage) {
      this.queryInfo.currPage = newPage;
      if (this.index == 1) {
        this.getUsersByTypePage();
      }
      if (this.index == 2) {
        this.gethealthNowDayPage();
      }
      if (this.index == 3) {
        this.getRiskedPeoplePage();
      }
      if (this.index == 4) {
        this.getDangerPeoplePage();
      }
    },
    // 获取当日填报学生
    async gethealthNowDayPage() {
      let { currPage, pageSize } = this.queryInfo;
      let res = await gethealthNowDayPage({ currPage, pageSize });
      this.studentData = res.data;
      this.allStudentNum = res.total;
    },
    // 获取当日风险学生
    async getRiskedPeoplePage() {
      let { currPage, pageSize } = this.queryInfo;
      let res = await getRiskedPeoplePage({ currPage, pageSize });
      this.studentData = res.data;
      this.allStudentNum = res.total;
    },

    // 获取当日途经高危地区学生
    async getDangerPeoplePage() {
      let { currPage, pageSize } = this.queryInfo;
      let res = await getDangerPeoplePage({ currPage, pageSize });
      this.studentData = res.data;
      this.allStudentNum = res.total;
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  .el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>